<template>
  <div>
    <div class="header-btn">
      <div>企微群群发详情</div>
      <div>
        <!-- <el-button
              type="primary"
              @click="addOrUpdateTask"
              :disabled="fromDetail"
              >确认</el-button
            > -->
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="fatherBox">
      <div class="leftSider" style="width: 49%">
        <!-- 基础信息 -->
        <div class="wrap g-card" style="margin-bottom: 20px">
          <div class="title-header">基础信息</div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="120px"
            label-position="right"
            style="position: relative"
          >
            <el-form-item label="群发名称"> {{}} </el-form-item>
            <el-form-item label="创建者"> {{}} </el-form-item>
            <el-form-item label="创建时间"> {{}} </el-form-item>
          </el-form>
        </div>
        <!-- 动态内容 -->
        <div class="wrap g-card">
          <div class="title-header">群发消息</div>
          <el-form
            ref="form11"
            :model="form11"
            label-width="120px"
            label-position="right"
            style="position: relative"
          >
            <el-form-item label="群发类型"> {{}} </el-form-item>

            <el-form-item label="发送时间"> {{}} </el-form-item>
            <el-form-item label="群发员工"> {{}} </el-form-item>
            <el-form-item label="群发对象"> {{}} </el-form-item>
          </el-form>
        </div>
        <div class="wrap g-card">
          <div class="title-header">群发内容</div>
        </div>
      </div>
      <div
        class="rightSider wrap g-card"
        style="width: 49%; margin-top: 0px"
      >
        <div>
          <div class="title-header">数据统计</div>
          <!-- 模块 -->
          <div class="modules">
            <div class="module">
              <div class="number">
                {{ sendNumber }}
              </div>
              <div class="label">已发送群主</div>
            </div>
            <div class="module">
              <div class="number">
                {{ notsendNumber }}
              </div>
              <div class="label">未发送群主</div>
            </div>
            <div class="module">
              <div class="number">
                {{ groupNumber }}
              </div>
              <div class="label">已送达群聊</div>
            </div>
            <div class="module">
              <div class="number">
                {{ notgroupNumber }}
              </div>
              <div class="label">未送达群聊</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      style="background: #fff"
    >
      <el-tab-pane label="员工详情" name="first"></el-tab-pane>
      <el-tab-pane label="客户群详情" name="second"></el-tab-pane>
    </el-tabs>
    <!-- 员工详情 -->
    <div
      v-if="activeName === 'first'"
      style="padding: 0 20px; background: #fff; padding-bottom: 15px"
    >
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-button :type="buttonType" @click="button1"
            >本次推送全部员工</el-button
          >
          <el-button
            :type="buttonType1"
            @click="button2"
            style="margin-left: -1px"
            >未发送员工</el-button
          >
          <el-button
            :type="buttonType2"
            @click="button3"
            style="margin-left: -1px"
            >已发送员工</el-button
          >
        </div>
        <div>
          共{{ staffNumber }}个
          <el-button type="primary" style="margin-left: 15px">
            提醒全部员工
          </el-button>
        </div>
      </div>
    </div>

    <!-- 客户群详情 -->
    <div
      v-if="activeName === 'second'"
      style="padding: 0 20px; background: #fff"
    >
      <el-table
        v-loading="loading"
        :data="customerList"
        style="width: 100%"
        height="415"
      >
        <!-- <el-table-column
              type="selection"
              width="55"
              align="center"
              label=""
            /> -->
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column
          label="群名称"
          align="center"
          prop="groupName"
          show-overflow-tooltip
        >
          <!-- <template slot-scope="{ row }">
                <span style="color: #082aff"> {{ row.name }}</span>
              </template> -->
        </el-table-column>
        <el-table-column
          label="群主"
          prop="master"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="群标签"
          align="center"
          prop="groupTag"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <div v-if="row.groupType">
              <el-tag type="success" v-if="row.groupTag === '0'">上班族</el-tag>
              <el-tag type="success" v-if="row.groupTag === '1'">
                打工仔</el-tag
              >
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          label="群人数"
          align="center"
          prop="groupNumber"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="今日新增"
          align="center"
          prop="addNumber"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="今日流失"
          align="lossNumber"
          prop="sex"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="群状态"
          align="center"
          prop="groupState"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <div v-if="row.groupState">
              <span v-if="row.groupState === '0'">有效</span>
              <span v-if="row.groupState === '1'"> 已解散</span>
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          label="发送状态"
          align="center"
          prop="sengStatus"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <div v-if="row.groupState">
              <span v-if="row.groupState === '0'">发送成功</span>
              <span v-if="row.groupState === '1'"> 未发送</span>
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="pageNum" :pageSize="pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
  </div>
</template>

<script>
import { queryCustomerMsg } from "../../../api/communityOperating/personalSop";
import { checkOrUpdateTask, querywetaglist } from "../../../api/communityOperating/enterpriseCircle";

export default {
  name: "groupDetail",
  data() {
    return {
      staffNumber: 1,
      activeName: "first",
      sendNumber: 4,
      notsendNumber: 1,
      groupNumber: 0,
      notgroupNumber: 1,
      noshow: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      customerName: "",
      followStatus: "",
      sendStatus: "",
      checkUser: 2,
      loading: false, // 新增员工弹窗
      customerList: [], // 新增客户数据
      followStatusList: [], // 跟进阶段
      sendStatusList: [
        {
          id: 1,
          value: "成功",
        },
        {
          id: 2,
          value: "失败",
        },
      ],
      total: 0,
      form: {
        // 基础设置
        activeStaff: "", // 任务名称
        chooseStaff: "1",
        remark: "",
        pageNum: 1,
        pageSize: 10,
      },
      form11: {
        type: "文件",
        name: "文件名称",
        textarea: "今天天气不错",
        codeStatus: "无",
        sendType: "立即发送",
        contentDetails: null,
      },
      scrmPersonSopUserRels: [], // 执行员工
      scrmPersonSopCustomerRels: [], // 选择客户
      scrmPersonSopRuleDtos: [], // 文案及周期设置
      rules: {
        activeStaff: [
          { required: true, message: "请输入文案内容", trigger: "change" },
        ],
      },

      dialogList1: [], // 公司架构
      staffName: "", // 搜索名字
      staffList: [], // 第二列勾选内容
      dialogList2: [], // 选择人员
      dialogList3: [], // 已经勾选的人员
      copyForm: {
        title: "", // 文案内容
        sendType: "1",
        sendTime: "", // 发送时间
        cycles: [], // 周期提醒
        // sendContent: [], // 发送内容
        scrmPersonSopMaterials: [], // 素材
      }, // 文案及周期设置
      editIndex: null, // 控制是添加打开弹窗，清空内容
      copyWritingDialog: false, // 新增文案及周期设置
      allDialogList: [], // 存放所有的员工，点弹窗确认需要遍历
      allId: [],
      userSex: [], // 性别
      fileList: [],
      weekList: [], // 周期提醒
      moId: "",
      tagArr: [],
      buttonType: "",
      buttonType1: "",
      buttonType2: "",
    };
  },
  created() {
    // 性别
    this.getDicts("sys_user_sex").then((res) => {
      if (res.code === 200) {
        this.userSex = res.data;
      }
    });
    // 跟进阶段
    this.getDicts("sys_customer_trackState").then((res) => {
      if (res.code === 200) {
        this.followStatusList = res.data;
      }
    });
  },
  created() {
    this.checkOrUpdateTask();
    this.querywetaglist();
  },
  mounted() {
    if (this.checkUser === 1) {
      this.queryCustomerMsg();
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.queryCustomerMsg()
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryCustomerMsg()
    },
    // 初始化查询
    checkOrUpdateTask() {
      console.log(this.$route.query);
      // 路由跳转带来得参数信息
      if (this.$route.query.rowContent.moId) {
        this.moId = this.$route.query.rowContent.moId;
      }

      if (this.moId) {
        checkOrUpdateTask({ moId: this.moId }).then((res) => {
          if (res.code === 200) {
            console.log(res.data, "------------------编辑详情");
            this.form11.textarea = res.data.content;
            this.form11.sendType =
              res.data.flagTime === "1" ? "立即发送" : "定时发送";
            this.form11.contentDetails = res.data.contentDetail;
            if (res.data.customerTag === "") {
              this.checkUser = 1;
            } else {
              this.checkUser = 2;
            }
            this.tagArr = res.data.synEmplist;
            if (res.data.desCusList) {
              this.total = res.data.desCusList.length;
              this.customerList = res.data.desCusList;
            }
            this.$refs.toShowList.selectMaterialConfrim(res.data.contentDetail);
          }
        });
      }
    },
    // 可见客户范围
    querywetaglist() {
      querywetaglist({
        name: "",
        moId: this.moId,
        trackTag: "",
        sucessFlag: "",
      }).then((res) => {
        console.log(res, "-------------res客户范围");
        this.customerList = res.data.weTagInfoList;
      });
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 搜索跟进进度
    queryCustomerMsg() {
      let obj = {
        customerName: this.customerName,
        followStatus: this.followStatus,
        sendStatus: this.sendStatus,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      // this.customerList = [];
      queryCustomerMsg(obj).then((res) => {
        console.log(res, "-----------res");
        if (res.code === 200) {
          //   if (this.customerList.length && res.rows.length) {
          //     // 去重添加新数据
          //     res.rows.forEach((item) => {
          //       this.allCustomerList.includes(item.customerId)
          //         ? this.allCustomerList
          //         : this.allCustomerList.push(item);
          //     });
          //   } else {
          //     this.allCustomerList = res.rows;
          //   }
          this.total = res.total;
        }
      });
    },

    button1() {
      this.buttonType = "primary";
      this.buttonType1 = "";
      this.buttonType2 = "";
    },
    button2() {
      this.buttonType = "";
      this.buttonType1 = "primary";
      this.buttonType2 = "";
    },
    button3() {
      this.buttonType = "";
      this.buttonType1 = "";
      this.buttonType2 = "primary";
    },
  },
};
</script>

<style lang='scss' scoped>
@import "../../../styles/base.scss";

.fatherBox {
  display: flex;
  justify-content: space-between;
}

.modules {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding: 0 20px;
  .module {
    width: 200px;
    height: 120px;
    background: #fafafa;
    border-radius: 4px;
    // border: 1px solid #eeeeee;
    margin-left: 15px;
    .number {
      font-size: 25px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      // font-weight: bold;
      color: #393b44;
      text-align: center;
      margin-top: 30px;
    }
    .label {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #505050;
      text-align: center;
      margin-top: 15px;
    }
  }
}

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33%;
    padding: 0 15px;
    box-sizing: border-box;
    max-height: 500px;
    overflow: auto;

    &:nth-child(2) {
      flex: 1;
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }
  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px;
      border: $normalBorder;
      text-align: center;
      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}

.copy-card {
  width: 740px;
  background-color: #fafafa;
  position: relative;
  margin: 10px;
  .content-item {
    width: 400px;
    background-color: #e9e9e9;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .copy-edit {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .right-close {
    position: absolute;
    right: -2px;
    top: -2px;
  }
}
</style>
